<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/LargeScreen.css">
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/module/gcjsy/js/echarts.min.js"></script>
</head>
<body>

<div class="main">

  <div class="main-header clear">
    <div class="main-logo">
      <div class="main-logo-card">
        <img src="img/logo.png" alt="">
      </div>
      <div class="main-logo-text">
        <h3>合肥市数据监控看板</h3>
        <p>He Fei Data Monitoring Billboard</p>
      </div>
    </div>

    <ul class="head-list">
      <li>
        <div class="icon-box">
          <img src="img/icon1.png" alt="">
        </div>
        <div class="text-box">
          <h3>150<small>家</small></h3>
          <p>运输企业</p>
        </div>
      </li>
      <li>
        <div class="icon-box">
          <img src="img/icon2.png" alt="">
        </div>
        <div class="text-box">
          <h3>5000<small>辆</small></h3>
          <p>运输企业</p>
        </div>
      </li>
      <li>
        <div class="icon-box">
          <img src="img/icon3.png" alt="">
        </div>
        <div class="text-box">
          <h3>50<small>个</small></h3>
          <p>建筑工地</p>
        </div>
      </li>
      <li >
        <div class="icon-box">
          <img src="img/icon4.png" alt="">
        </div>
        <div class="text-box">
          <h3>50<small>个</small></h3>
          <p>消纳场</p>
        </div>
      </li>
      <li >
        <div class="icon-box">
          <img src="img/icon5.png" alt="">
        </div>
        <div class="text-box">
          <h3>250<small>个</small></h3>
          <p>零星建筑垃圾</p>
        </div>
      </li>
      <li >
        <div class="icon-box">
          <img src="img/icon6.png" alt="">
        </div>
        <div class="text-box">
          <h3>2000<small>人</small></h3>
          <p>驾驶人员</p>
        </div>
      </li>
    </ul>

    <div class="main-weather">
      <div class="weather-temperature" id="weatherData">
      </div>
      <div class="weather-date">
        <p id="nowTime">15:43:14</p>
        <span id="nowData">2020-12-29</span>
      </div>
    </div>
  </div>

  <div class="main-body clear">
    <div class="main-body-left">
      <section class="violations">
        <h3 class="main-title">
          <span>违规报警趋势（近七日）</span>
        </h3>
        <div class="violation-trend">
          <div id="charts1"></div>
        </div>
      </section>
      <section>
        <h3 class="main-title">
          <span>执法处理明细（本月）</span>
          <div class="sw-tab clear">
            <span class="active">违规</span>
            <span>处罚</span>
          </div>
        </h3>
        <div class="table-box">
          <table class="table-s">
            <thead>
              <tr>
                <th>处罚对象</th>
                <th>处罚类型</th>
                <th>处罚日期</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>皖A00001</td>
                <td>罚款</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>安徽徳拓渣土车运输有限公司</td>
                <td>罚款</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>合肥蜀山区一号工地</td>
                <td>罚款</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>安徽徳拓渣土车运输有限公司</td>
                <td>停工整顿</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>合肥蜀山区一号工地</td>
                <td>罚款</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>安徽徳拓渣土车运输有限公司</td>
                <td>停工整顿</td>
                <td>2020-10-20</td>
              </tr>
              <tr>
                <td>合肥蜀山区一号工地</td>
                <td>停工整顿</td>
                <td>2020-10-20</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
    <div class="main-body-center">
      <div class="map" id="mapBox" style="width: 100%;height: 100%">


      </div>
    </div>
    <div class="main-body-right">
      <section>
        <h3 class="main-title">
          <span>今日报警情况</span>
        </h3>
        <div class="flex-s">
          <div class="violation-type" id="charts2">

          </div>
        </div>

        <h4 class="charts3-t">今日报警企业TOP10</h4>

        <div class="charts3" id="charts3">

        </div>
      </section>


    </div>
  </div>
</div>



<script src="js/template.js"></script>
<script src="js/LargeScreen.js"></script>

<script src="js/areaJson.js"></script>
<script src="js/map.js"></script>
<script type="text/html" id="weatherTpl">
  {{each obj as s}}
  <div>
    <p>{{s.low}}~{{s.high}}</p>
    <span>{{s.date}} {{s.type}}</span>
  </div>
  {{/each}}
</script>
<script>
    $(function () {
        showLeftTime();
        getWeather();
    });
    function weatherEvent() {
        var index=0;
        setInterval(function(){
            index++;
            if(index<=4){
                scrollHeight=-48*index;
                $(".weather-temperature>div").each(function () {
                    $(this).animate({
                        "top":scrollHeight+"px"
                    },1000)

                });
                $(".weather-icon>img").each(function () {
                    $(this).animate({
                        "top":scrollHeight+"px"
                    },1000)
                })
            }else{
                $(".weather-temperature>div").each(function () {
                    $(this).css("top","0px");
                });
                $(".weather-icon>img").each(function () {
                    $(this).css("top","0px");
                });
                index=0;
            }

        },5000);

    }
    function getWeather() {
        $.ajax({
            method: "get",
            url: "http://wthrcdn.etouch.cn/weather_mini?city=" + encodeURIComponent('合肥'),
            success: function (result) {
                var obj = JSON.parse(result);
                var smg = obj.data.forecast;

                var info=[];
                for (var i=0;i<smg.length;i++) {

                    var s = smg[i];
                    var date1 = s.date;
                    var d = date1.substring(date1.length-1,date1.length);
                    var date = '';
                    switch (d) {
                        case '日':
                            date='SUN';
                            break;
                        case '一':
                            date='MON';
                            break;
                        case '二':
                            date='TUE';
                            break;
                        case '三':
                            date='WED';
                            break;
                        case '四':
                            date='THU';
                            break;
                        case '五':
                            date='FRI';
                            break;
                        case '六':
                            date='SAT'
                    }
                    var high = s.high.substring(3,s.high.length);
                    var low = s.low.substring(3,s.low.length);
                    var type = s.type;
                    info.push({
                        'date':date,
                        'high':high,
                        'low':low,
                        'type':type
                    });
                }
                $("#weatherData").html(template("weatherTpl", {'obj':info}));
                //weatherEvent();
            }
        });
    }
    function showLeftTime(){
        var now=new Date();
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        if(month<10){
            month='0'+month;
        }
        var day=now.getDate();
        if(day<10){
            day='0'+day;
        }
        var hours=now.getHours();
        if(hours<10){
            hours='0'+hours;
        }
        var minutes=now.getMinutes();
        if(minutes<10){
            minutes='0'+minutes;
        }
        var seconds=now.getSeconds();
        if(seconds<10){
            seconds='0'+seconds;
        }
        var showTime=hours+":"+minutes+":"+seconds+"";

        var showData = year+"-"+month+"-"+day;
        $('#nowTime').html(showTime);

        $('#nowData').html(showData);
//一秒刷新一次显示时间
        var timeID=setTimeout(showLeftTime,1000);
    }

</script>

</body>
</html>
